<!-- NotifyHub.vue -->
<template>
  <div ref="bell" class="bell" @click="toggleBubble">
    <img src="/icons/bell.png"/>
  </div>

  <div v-if="bubble" class="bubble" :class="dockPos" :style="bubblePos">
    <p v-for="n in notifications" :key="n.id">{{ n.title }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({ dockPos: String });

const bell = ref(null);
const bubble = ref(false);
const notifications = ref([{ id: 1, title: '下载完成' }]);

function toggleBubble() { bubble.value = !bubble.value; }

const bubblePos = computed(() => {
  const rect = bell.value?.getBoundingClientRect();
  if (!rect) return {};
  if (props.dockPos === 'bottom')
    return { left: rect.left + 'px', bottom: '80px' };
  if (props.dockPos === 'left')
    return { left: rect.right + 8 + 'px', top: rect.top + 'px' };
  if (props.dockPos === 'right')
    return { right: window.innerWidth - rect.left + 8 + 'px', top: rect.top + 'px' };
});
</script>

<style scoped>
.bell { cursor: pointer; }
.bubble {
  position: fixed;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(20px);
  padding: 10px;
  border-radius: 8px;
  min-width: 200px;
}
</style>